<!DOCTYPE HTML>
<html>
	<head> 
		<title>天地图示例</title>
	    <meta charset="utf-8" />
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <link href="../lrmap/api.css" media="screen" rel="stylesheet" type="text/css" />
	    <!--[if lte IE 8]>
	    <link href="../lrmap/api.ie.css" media="screen" rel="stylesheet" type="text/css" />
	    <![endif]-->
		<!--JQuery核心类库-->
		<script src="../lrmap/jquery.min.js" type="text/javascript"></script>
		<!--龙软地图API核心类库 是基于leaflet改写的-->
	    <script src="../lrmap/api_v1_src.js" type="text/javascript"></script>
		<!--针对龙软地图API核心类库封装的地图创建脚本-->
	    <script src="../lrmap/jquery_lrmap_v1.js" type="text/javascript"></script>
		
		<script type="text/javascript" src="js/nav.js"></script>	
	    <style>
	       html, body, #map {
	          height:100%;
	          width:100%;
	          padding:0px;
	          margin:0px;
	          background-color:#040728;
	       }
	    </style>
		<script type="text/javascript">
        	var map;
        	$(function(){
        		jQuery.LrMap.initializeMap( 'map',"http://218.240.135.210:8081/",{   
	        		zoom: 4,//默认显示地图的缩放级别
	                center:new L.LatLng(39.0898, 107.22656, true), //默认显示地图中心点
	                measureControl: false,//是否显示左侧测量按钮，用来划区测量。
	                contextmenu: false//是否显示右键菜单
	            },initmap);
        	});
        	
            function initmap( newmap ){
            	map = newmap;
            	map.on('zoomend',onZoomChange);
            	//设置地图控制器的默认级别状态
            	setControllerZoom(5);
            }
            
            function onZoomChange(e){
               setControllerZoom(e.target._zoom);
            }
		</script>
	</head>
	<body>
		<div id="map"> </div>
		
		<div onmouseover="levelShow()" onmouseout="levelHidden()" onmousemove="onnavbMouseMove();"  style="position: absolute; left: 5px; top: 10px; -moz-user-select: none; width: 64.5px; height: 193px; right: 10px; z-index: 1100;">
			<div id = "zoomIn" onclick="zoomIn();" style="background-image: url(img/mapNav.png); background-position: 0px -221px; width: 20px; height: 20px; position: absolute; overflow: hidden; left: 14px; top: 45px; -moz-user-select: none; cursor: pointer; z-index: 10;" title="放大"> </div>
			<div id="zoomOut" onclick="zoomOut();" style="background-image: url(img/mapNav.png); background-position: 0px -265px; width: 20px; height: 20px; position: absolute; overflow: hidden; left: 14px; top: 172px; -moz-user-select: none; cursor: pointer; z-index: 10;" title="缩小"> </div>
			<div id="translation" style="background-position: 0px 0px; width: 42px; position: absolute; overflow: hidden; left: 2px; top: 0px; -moz-user-select: none; cursor: pointer; background-image: url(img/mapNav.png); height: 42px;">
				<div id="translationLeft" onclick="translation('left');" onmouseover="translationMouseOver('left');" onmouseout="translationMouseOut();" title="左移" style="width: 12px; height: 12px; position: absolute; overflow: hidden; left: 0px; top: 12px; -moz-user-select: none; cursor: pointer;"> </div>
				<div id="translationUp" onclick="translation('up');" onmouseover="translationMouseOver('up');" onmouseout="translationMouseOut();" title="上移" style="width: 12px; height: 12px; position: absolute; overflow: hidden; left: 13px; top: 0px; -moz-user-select: none; cursor: pointer;"> </div>
				<div id="translationRight" onclick="translation('right');" onmouseover="translationMouseOver('right');" onmouseout="translationMouseOut();" title="右移" style="width: 12px; height: 12px; position: absolute; overflow: hidden; left: 27px; top: 11px; -moz-user-select: none; cursor: pointer;"> </div>
				<div id="translationDown" onclick="translation('down');" onmouseover="translationMouseOver('down');" onmouseout="translationMouseOut();" title="下移" style="width: 12px; height: 12px; position: absolute; overflow: hidden; left: 13px; top: 25px; -moz-user-select: none; cursor: pointer;"> </div>
			</div>
			
			<!-- 滑动条选择部分 -->
			<div id="navBarSection" onclick="getClickSliderBarLevel();" onmousemove="onnavbMouseMove();" style="position: absolute; left: 21px; top: 63px; z-index: 5; background-image: url(img/mapNav.png); background-position: -24px -225px; background-repeat: no-repeat; width: 6px; height: 96px; -moz-user-select: none; cursor: pointer;">
				<!-- 滑动条按钮 -->
				<div id="navB" onmousedown="onnavbMouseDown();" onmouseup="onnavbMouseUp();" onmousemove="onnavbMouseMove();" style="background-image: url(img/mapNav.png); background-position: 0px -309px; width: 18px; height: 10px; position: absolute; overflow: hidden; left: -6px; -moz-user-select: none; cursor: pointer; top: 68px;" title=""> </div>	
			</div> 
			
			<!-- 滑动条全部 -->
			<div id="navBarAll" onclick="getClickSliderBarLevel();" onmousemove="onnavbMouseMove();" style="position: absolute; left: 21px; top: 63px; background: url(img/mapNav.png) no-repeat scroll -33px bottom transparent; z-index: 4; cursor: pointer; width: 6px; height: 108px; -moz-user-select: none;"> </div>
			
			<div id="level" style="position: absolute; left: 20px; top: 49px; width: 45px; height: 156px;display: none">
				<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"> </div>
				<div onclick="setControllerZoom(15);" style="position: absolute; left: 18px; top: 18px; cursor: pointer; width: 27px; height: 18px; overflow: hidden; background: url(img/mapNav.png) no-repeat scroll 0px -380px transparent;"> </div>
				<div onclick="setControllerZoom(9);" style="position: absolute; left: 18px; top: 54px; cursor: pointer; width: 27px; height: 18px; overflow: hidden; background: url(img/mapNav.png) no-repeat scroll 0px -400px transparent;"> </div>
				<div onclick="setControllerZoom(5);" style="position: absolute; left: 18px; top: 78px; cursor: pointer; width: 27px; height: 18px; overflow: hidden; background: url(img/mapNav.png) no-repeat scroll 0px -421px transparent;"> </div>
				<div onclick="setControllerZoom(1);" style="position: absolute; left: 18px; top: 102px; cursor: pointer; width: 27px; height: 18px; overflow: hidden; background: url(img/mapNav.png) no-repeat scroll 0px -442px transparent;"> </div>
			</div>
		</div>
	</body>
</html>